{extend name="wap@style/base" /}
{block name="resources"}
<style>
    body {
        background: #eee;
    }

    .bar {
        height: 84px;
    }

    .hui-media-content p,
    .hui-media-content h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hui-media-list li {
        padding: 8px 12px !important;
    }

    .hui-media-list-img {
        width: 22vw !important;
        height: 22vw !important;
        border-radius: 3px;
    }

    .hui-media-list-img img {
        width: 100%;
        height: 100%;
    }

    .collection {
        display: -webkit-flex;
        /* Safari */
        display: flex;
        justify-content: space-between;
    }

    .collection div,
    .collection span {
        font-size: 13px;
        line-height: 1.5em;
        color: #999999;
        word-break: break-word;
    }

    .brief {
        margin-top: 8px;
    }

    .publish-tab {
        display: flex;
        width: 100%;
        height: 40px;
        position: fixed;
        top: 44px;
        justify-content: space-around;
        align-items: center;
        background: #fff;
    }
    .publish-tab>div{
        position: relative;
        height: 100%;
        line-height: 40px;
    }
    .red-bar{
        position: absolute;
        width: 50%;
        height: 3px;
        left: 50%;
        transform:  translateX(-50%);
        bottom: 0;
        background: red;
    }
    .state {
        display: flex;
        justify-content: space-between;
        line-height: 36px;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 8px;
    }

    #list {
        padding: 8px;
    }

    .operate {
        display: flex;
        justify-content: flex-end;
    }

    .operate div {
        color: #666;
        font-size: 12px;
        border-radius: 50px;
        padding: 5px 10px;
        border: 1px solid #eee;
    }
    .operate a{color: #666;
        font-size: 12px;}
    #list li {
        display: block;
        border-radius: 5px;
    }
    .hide{
        display: none;
    }
</style>
{/block}

{block name="main"}
<div class="publish-tab">
    <div onclick="listShowByState(this,'all')">全部<div class="red-bar"></div></div>
    <div onclick="listShowByState(this,1)">已发布<div class="red-bar hide"></div></div>
    <div onclick="listShowByState(this,0)">正在审核<div class="red-bar hide"></div></div>
    <div onclick="listShowByState(this,2)">审核失败<div class="red-bar hide"></div></div>
</div>
<div class="bar"></div>
<div class="hui-wrap">
    <div id="refreshContainer" class="hui-refresh">
        <div class="hui-refresh-icon"></div>
        <div class="hui-refresh-content hui-media-list">
            <ul id="list"></ul>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="__STATIC__/ext/hui/js/hui-refresh-load-more.js"></script>
<script>
    // 上拉加载下拉刷新
    var page = 1;
    var page_size = 10;
    var state = 'all'
    hui.refresh('#refreshContainer', refresh);
    hui.loadMore(getMore);
    // 渲染页面
    function listShow(data) {
        var timestamp = ((new Date()).getTime()+'').substr(0,10);
        
        var html = '';
        for (var i = 0; i < data.length; i++) {
            var time = ((timestamp-data[i].reflash_time)/3600).toFixed(1);
            html += '<li><div class="state" style="align-self:flex-end">'
            html += '<div>发布时间：' + data[i].add_time + '</div>'
            html += '<div>' + data[i].state_as + '</div>'
            html += '</div>'
            html += '<a href="{:addon_url(\'Sns://wap/category/info\')}?info_id=' + data[i].info_id + '">'
            html += '<div class="hui-media-list-img"><img src="' + nc.img(data[i].img_cover) + '" /></div>'
            html += '<div class="hui-media-content">'
            html += '<h1>' + data[i].title + '</h1>'
            html += '<p>'+data[i].category_name+'</p>'
            html += '</div>'
            html += '</a>'
            if (data[i].state != 1) {
                html += '<div class="operate">'
                html += '<div onclick="delPublish(this,'+data[i].info_id+')">删除</div>'
                html += '<div><a href="{:addon_url(\'Sns://wap/member/publish\')}?info_id=' + data[i].info_id + '">编辑</a></div>'
                html += '</div>'
            }else if(data[i].reflash_time != 0 && time < 24){          
                html += '<div class="operate">'
                html += '<div>还剩'+(24-parseFloat(time))+'个小时可刷新</div>'
                html += '<div onclick="delPublish(this,'+data[i].info_id+')">删除</div>'
                html += '<div><a href="{:addon_url(\'Sns://wap/member/publish\')}?info_id=' + data[i].info_id + '">编辑</a></div>'
                html += '</div>'
            }else{
                html += '<div class="operate">'
                html += '<div onclick="reflash(this,'+data[i].info_id+')">刷新</div>'
                html += '<div onclick="delPublish(this,'+data[i].info_id+')">删除</div>'
                html += '<div><a href="{:addon_url(\'Sns://wap/member/publish\')}?info_id=' + data[i].info_id + '">编辑</a></div>'
                html += '</div>'
                
            }
            html += '</li>'
        }
        $('#list').append(html);
    }
    //加载更多
    function getMore() {
        nc.api("Sns.Member.getPublishList", {
                "page": page,
                "page_size": page_size,
                "access_token": "{$access_token}",
                "state" : state
            },
            function (res) {
                console.log(data);
                var data = res.data.list;
                listShow(data);
                //判断加载完毕
                if (data.length < page_size) {
                    hui.endLoadMore(true, '我是有底线的 ...');
                    return false;
                }
                page++;
                hui.endLoadMore();
            }, true)
    }
    // 下拉刷新
    function refresh() {
        console.log(state);
        // hui.loading('加载中...');
        nc.api("Sns.Member.getPublishList", {
                "page": 1,
                "page_size": page_size,
                "access_token": "{$access_token}",
                "state" : state
            },
            function (res) {
                $('#list').empty();
                console.log(res);
                hui.closeLoading();
                var data = res.data.list;
                listShow(data);
                page = 2;
                //结束刷新
                hui.endRefresh();
                //重置加载更多状态
                hui.resetLoadMore();
                if (data.length == 0) {
                    hui.endLoadMore(true, '暂无记录');
                    return false;
                }
                if (data.length < page_size) {
                    hui.endLoadMore(true, ' ');
                    return false;
                }
            }, true)
    }
    // 状态选项卡
    function listShowByState(obj,stat){
        $(obj).find('.red-bar').show(200);
        $(obj).siblings().find('.red-bar').hide(200);
        $('#list').empty();
        state = stat;
        hui.refresh('#refreshContainer', refresh);
    }
    // 删除发布
    function delPublish(obj,info_id){
        hui.confirm('您确定要删除吗？', ['取消', '确定'], function () {
        nc.api("Sns.Member.delPublishInfo",
            {'info_id':info_id},
            function(res){
                $(obj).parentsUntil('li').parent().hide();
                hui.toast('删除成功');
            })
        })
    }
    //刷新发布
    function reflash(obj,info_id){
        hui.confirm('您确定要现在刷新吗？',['取消','确定'],function (){
            nc.api("Sns.Member.reflashInfo",
            {'info_id':info_id},
            function(res){
                hui.toast('恭喜,您的商品排名又提前了');
            })
        })
    }
</script>
{/block}